<template>
    <div class="bigbox">
        <Hand title="支付成功" :left="true" :iconbool="false" @back="backPrve"></Hand>
        <div class="background">
            <img src="../../img/首页/u19.png" alt="">
        </div>
        <Header class="header"></Header>
        <Cente class="center"></Cente>
        <Cente class="center2" title="取货人详情" :listArr="ArrayList">
        </Cente>
        <!-- <OrderDetail class="center2"></OrderDetail> -->
        <van-button round block type="primary" native-type="submit" class="button" @click="goHome"
            color="#2BCDDD">返回首页</van-button>
    </div>
</template>

<script setup>
import Hand from '../../components/Hand.vue';
import Header from '../../views/My/Mycomponents/OrderListContent.vue'
import Cente from '../../components/Store/PaySuccess.vue'
import OrderDetail from '../../components/Store/OrderSucessDetail.vue'
import { useRouter } from 'vue-router'
const router = useRouter()

const backPrve = () => {
    router.go(-1)
}

const goHome = () => {
    router.push('/Home')
}

const ArrayList = [
    {
        list: "取货人",
        id: 1,
        listValue: "OMINI.BASS"
    },
    {
        list: "联系电话",
        id: 2,
        listValue: "1880512345"
    },
    {
        list: "备注",
        id: 3,
        listValue: "需要打包盒，加三倍辣！！多加点葱香菜，折耳根！"
    }
]

</script>

<style lang="less" scoped>
.bigbox {
    display: flex;
    position: relative;
    flex-direction: column;
    background: #ecfdfa;

    .background {
        position: absolute;
        top: 0vw;
        left: 0vw
    }

    .header {
        // position: absolute;
        position: relative;
        top:  20px;
        left: 0vw
    }

    .center {
        margin: 40px 6vw 4vw 4vw;
    }

    .center2 {
        margin: -2.333vw 6vw 30vw 4vw;
    }
}

.button {
    position: fixed;
    bottom: 0vw;
    left: 0
}
</style>